<template>
	<view class="page">
		<view class="h30"></view>
		<view class="blocks" style="background: transparent;box-shadow: none;">
			<view class="tab-item" style="background: transparent;">
				<view class="user-info" @click="navigatorCheck('/pagesA/pages/editUser/editUser')">
					<image :src="member.avatar||defUserPic" style="width: 120rpx;height: 120rpx;border-radius: 60rpx;"></image>
					<view class="user-status flex-SB">
						<view>
							<view class="login-status">{{member.nickname||'您还未登录'}}</view>
							<view v-if="member.phone" class="data-text">
								{{member.nickname?'编辑资料':''}}
							</view>
							<view v-else @click="$navigateTo('/pagesA/pages/login/login')" class="login-text">
								立即登录
							</view>
						</view>
						<view>
							<u-icon name="arrow-right" color="#000"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 15px;"></view>
		<view class="blocks">
			<view class="tab-item"  style="padding: 20rpx">
				<view class="equipment-info">
					<view class="equipment-msg" style="display: flex;flex-direction: row;">
						<image style="height: 80rpx;width: 80rpx;" src="@/static/images/watchs.png" alt="" class="watch">
							<view class="equipment-status">
								<view @click="navigatorCheck('/pagesA/pages/equipment/unbind-equipment')" class="equipment-name">
									{{member.imei?'设备信息':'未绑定'}}
								</view>
								<view class="data-text">{{member.imei?'IMEI:'+member.imei:'绑定设备后才可进行情绪识别'}}</view>
							</view>
					</view>
					<view class="equipment" v-if="member.imei"
						@click="navigatorCheck('/pagesA/pages/equipment/unbind-equipment')">管理设备</view>
					<view class="equipment" v-else @click="navigatorCheck('/pagesA/pages/equipment/bind')">绑定设备</view>
				</view>
			</view>
		</view>
		<view class="blocks" style="justify-content: center;display: flex;flex-direction: column;align-items: center;">
			<view style="padding: 20rpx 30rpx;font-size: 28rpx;font-weight: 500;width: 640rpx;">我的报告</view>
			<view style="width: 640rpx;height: 94rpx;margin-top: 20rpx;" @click="navigatorCheck('/pagesA/pages/report/report-day')">
				<view class="my-tab">
					<view class="flex-SB">
						<image src="@/static/images/mine1.png" alt="" class="tab-pic">
							<view class="tab-name">情绪报告</view>
					</view>
					<u-icon size="12" name="arrow-right" color="#a6a6a6"></u-icon>
				</view>
			</view>
			<view style="width: 640rpx;height: 94rpx;margin-top: 30rpx;" @click="navigatorCheck('/pagesA/pages/testMain/testRecord')">
				<view class="my-tab">
					<view class="flex-SB">
						<image src="@/static/images/mine2.png" alt="" class="tab-pic">
							<view class="tab-name">服务记录</view>
					</view>
					<u-icon size="12" name="arrow-right" color="#a6a6a6"></u-icon>
				</view>
			</view>
<!-- 			<view style="width: 640rpx;height: 94rpx;margin-top: 30rpx;" @click="navigatorCheck('/pagesA/pages/health/health')">
				<view class="my-tab">
					<view class="flex-SB">
						<image src="@/static/images/mine3.png" alt="" class="tab-pic">
							<view class="tab-name">生理健康</view>
					</view>
					<u-icon size="12" name="arrow-right" color="#a6a6a6"></u-icon>
				</view>
			</view> -->
			<view style="height: 50rpx;"></view>
		</view>
		<view v-if="member.phone" @click="logout" class="blocks" style="background-color: #1d6efa;border-radius: 37rpx;width: 640rpx;" >
			<view style="margin: 0 auto;line-height: 74rpx;text-align: center;color: #fff;">退出登录</view>
		</view>
		<view class="feedback"><text @click="navigatorCheck('/pagesA/pages/list/feedback')">问题反馈</text><text @click="checkVersion"></text><u-icon name="arrow-right" color="#999"></u-icon>
		</view>
		<view class="feedback"><text @click="checkVersion">测试本v:{{version}}</text></view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				version:getApp().globalData.version,
				defUserPic:'https://baxztech.com/bian_admin_api/public/bianmp/user-pic.png'
			}
		},
		methods: {
			navigatorCheck(url) {
				if(this.member.phone){
					uni.navigateTo({
						url: url
					})
				}else{
					uni.navigateTo({
						url: '/pagesA/pages/login/login'
					})
				}
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: `退出登录后部分功能将无法使用，是否退出？`,
					success: (e) => {
						if (e.confirm) {
							this.$store.commit('SET_MEMBER', {})
							uni.clearStorageSync()
						}
					}
				})
			},
			checkVersion() {
				const updateManager = wx.getUpdateManager()
				updateManager.onCheckForUpdate(function(up) {
					if (up.hasUpdate) {
						uni.showToast({
							icon: 'none',
							title: '下载更新中~'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '已是最新版本！'
						})
					}
			
				})
				updateManager.onUpdateReady(function() {
					wx.showModal({
						title: '更新提示',
						content: '新版本已经准备好，是否重启应用？',
						success: function(res) {
							if (res.confirm) {
								uni.clearStorageSync();
								updateManager.applyUpdate()
							}
						}
					})
				})
				updateManager.onUpdateFailed(function() {
					uni.showToast({
						icon: 'none',
						title: '新版本下载失败！'
					})
				})
			}
		},
		onLoad(opt) {
			if (opt.update) {
				let phone = uni.getStorageSync('phone') || ''
				if (!phone) return;
				uni.$u.http.post('/client/user_info', {
					phone
				}).then(res => {
					this.$store.commit('SET_MEMBER', res.data.userinfo)
					uni.setStorageSync('MEMBER', res.data.userinfo)
				})
			}
		},
	}
</script>

<style>
	.block {
		margin-bottom: 15px;
	}
	.blocks {
		margin-bottom: 15px;
	}

	.tab-item {
		background-color: #fff;
		border-radius: 10px;
	}

	.user-info {
		display: flex;
		justify-content: flex-start;
	}

	.user-status {
		width: 550rpx;
		margin-left: 30rpx;
	}

	.login-status,
	.user-name {
		padding-top: 6px;
		height: 20px;
		line-height: 20px;
		font-weight: 700;
		font-size: 20px;
		color: #0F0F0F;
		padding-bottom: 10px;
	}

	.equipment-info {
		display: flex;
		justify-content: space-between;
	}

	.equipment-msg {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.equipment-status {
		margin-left: 30rpx;
	}

	.equipment-name{
		color: #000;
		font-weight: 500;
		font-size: 28rpx;
	}
	.equipment {
		margin-top: 15rpx;
		line-height: 52rpx;
		height: 52rpx;
		text-align: center;
		background-color: #1d6efa;
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
		border-radius: 26rpx;
		padding: 0px 30rpx;
	}

	.my-tab {
		padding: 0 26rpx 0 32rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		background-color: #f6f6f6;
		border-radius: 36rpx;
	}

	.tab-name {
		height: 92rpx;
		line-height: 92rpx;
		font-size: 28rpx;
		color: #2E2E2E;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.tab-pic {
		display: block;
		height: 54rpx;
		width: 54rpx;
	}

	.info-dot {
		width: 12rpx;
		height: 12rpx;
		background-color: red;
		position: absolute;
		top: 40rpx;
		right: 60rpx;
		border-radius: 50%;
	}

	.data-text {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		/* color: #9E9E9E; */
		color: #A6A6A6;
	}
	.login-text{
		font-size: 28rpx;
		font-weight: 500;
		color: #01D6D6;
	}
	.feedback {
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		margin: 0 auto;
		font-size: 14px;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>